<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!--查询区-->
      <div class="table-page-search-wrapper">
        <a-form :form="form" layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="报告日期">
                <a-input type="hidden" v-decorator="['reportDate',{initialValue:initReportDate+'',rules: []}]"/>
                <a-range-picker
                  allowClear
                  :defaultValue="initReportDate"
                  format="YYYYMMDD"
                  show-time
                  @change="onReportDateChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="appId">
                <a-input v-decorator="['appId',{rules: []}]" placeholder="请输入appId"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="服务">
                <a-input v-decorator="['service',{rules: []}]" placeholder="请输入服务"/>
              </a-form-item>
            </a-col>
            <!--隐藏查询条件-->
            <template v-if="advanced">
            </template>
            <a-col :md="!advanced && 8 || 24" :sm="24">
              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button type="primary" @click="handleSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
                <a @click="() => this.advanced = !this.advanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'"/>
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!--全局操作-->
      <div class="table-operator">
        <a-button type="primary" icon="download" @click="handleDownload" v-if="hasPerm('admin:gateway:metric:download')">下载</a-button>
      </div>
      <!--汇总-->
      <!--数据表格-->
      <a-table
        :rowKey=" (record => record.id)"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :rowSelection="rowSelection"
        :loading="loading"
        @change="tableChange"
        bordered
      >
        <!--字段扩展显示customRender-->
        <!--行操作-->
        <template v-slot:action="text, record">
          <span>
          </span>
        </template>
      </a-table>
      <!--自定义组件-->
    </a-card>
  </page-header-wrapper>
</template>
<script>
  import curdMixins from '@/utils/mixins/curdMixins'
  import { getList, downloadFile } from '@/api/gateway/metric'
  export default {
    mixins: [curdMixins],
    components: {
    },
    data () {
      this.columns = [
        {
          title: '报告日期',
          dataIndex: 'reportDate'
        },
        {
          title: 'appId',
          dataIndex: 'appId'
        },
        {
          title: '服务',
          dataIndex: 'service'
        },
        {
          title: '通过qps',
          dataIndex: 'passQps'
        },
        {
          title: '限流qps',
          dataIndex: 'blockQps'
        },
        {
          title: '成功qps',
          dataIndex: 'successQps'
        },
        {
          title: '异常次数',
          dataIndex: 'exceptionQps'
        },
        {
          title: '所有成功qps耗时总和',
          dataIndex: 'rt'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime'
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ]
      return {
        initReportDate: [this.moment().add(-1, 'd').format('YYYYMMDD'), this.moment().add(1, 'd').format('YYYYMMDD')],
        genTemp: null
      }
    },
    created () {
    },
    methods: {
      // 表单参数过滤,mixins调用
      filterForm (values) {
        return values
      },
      // 列表查询,mixins调用
      list (param) {
        return getList(param)
      },
      // 下载list,mixins调用
      download (param) {
        return downloadFile(param)
      },
       // 日期格式转换
      onReportDateChange (date, dateString) {
         this.form.setFieldsValue({ 'reportDate': dateString + '' })
      }
    }
  }
</script>
<style scoped>
</style>
